<template>
  <div class="profile">
    <div class="topNav">
      <el-page-header @back="goBack" content="个人资料"> </el-page-header>
    </div>
    <div class="main" @mouseenter="openMask" @mouseleave="closeMask">
      <el-card class="box-card">
        <div class="mask" v-show="mask" @click="goEdit">
          <div class="tips">
            <i class="el-icon-edit" style="color: #409eff"></i>
            <span style="margin-left: 10px; color: #409eff">编辑</span>
          </div>
        </div>
        <div>
          <el-form label-position="left" label-width="90px" :model="mess">
            <el-form-item label="合作单位">
              {{ mess.user.orgname }}
            </el-form-item>
            <el-form-item label="用户名">
              {{ mess.user.username }}
            </el-form-item>
            <el-form-item label="昵称">
              {{ mess.user.nickname }}
            </el-form-item>
            <el-form-item label="密码"> *** </el-form-item>
            <el-form-item label="联系电话 ">
              {{ mess.user.telphone }}
            </el-form-item>
            <el-form-item label="邮箱">
              {{ mess.user.email }}
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "Profile",
  data() {
    return {
      mask: false,
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      options_value: "",
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
      },
      mess: {
        user: {
          org_id: null,
          orgname: "",
          username: "",
          password: "",
          nickname: "",
          telphone: "",
          email: "",
        },
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        telphone: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
        ],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    //获取用户信息
    getUserInfo() {
      const userId = this.$store.state.userId;
      this.axios
        .get("/user/userMess/" + userId)
        .then((res) => {
          this.mess.user = {
            org_id: res.data.data.company_id,
            orgname: res.data.data.company_name,
            username: res.data.data.username,
            nickname: res.data.data.nickname,
            telphone: res.data.data.telphone,
            email: res.data.data.email,
          };
          this.$store.commit("user_mess", this.mess.user);
        })
        .catch((err) => {
          this.$message.error("获取个人资料失败");
          console.error(err);
        });
    },
    goBack() {
      this.$router.go(-1);
    },
    openMask() {
      this.mask = true;
    },
    closeMask() {
      this.mask = false;
    },
    goEdit() {
      this.$router.push("/profile/edit");
    },
  },
};
</script>

<style scoped>
.profile {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-color: #f6f9fd;
}
.topNav {
  position: relative;
  height: 10vh;
  width: 100%;
  border-bottom: 1px solid #e2e3e4;
}
.el-page-header {
  position: absolute;
  left: 3%;
  top: 50%;
  transform: translate(0, -50%);
}
.main {
  padding: 18px 20px 18px 20px;
}

.box-card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 85vh;
  padding: 25px;
}
.mask {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 97%;
  height: 96%;
  transform: translate(-50%, -50%);
  background: rgba(75, 74, 74, 0.1);
  z-index: 999;
  cursor: pointer;
}
.tips {
  position: absolute;
  right: 2%;
  top: 3%;
  width: 10%;
  height: 8vh;
  font-size: 1.2rem;
  line-height: 60px;
}
.box-card /deep/ .el-form-item {
  margin-bottom: 1vh;
}
.el-form-item__label {
  color: rgb(241, 26, 26);
}
.box-card >>> .el-form-item label:after {
  content: " ";
  display: inline-block;
  width: 100%;
}

.box-card >>> .el-form-item__label {
  width: 180px;

  text-align: justify;
}
.box-card >>> .el-form-item.is-required .el-form-item__label:before {
  content: none !important;
}
.box-card >>> .el-form-item__content {
  box-sizing: border-box;
  padding: 0 0 0 50px;
  width: 80%;
  text-align: left;
}
</style>